<template>
  <div class="shuzigongfu">
    <img
      src="@/assets/shizigongfurigthtopcorner.png"
      style="height: 22px"
      class="imgclose1"
    />
    <!-- 数字共富弹框 -->
    <div style="position: relative; height: 100%">
      <div class="mainContent">
        <div
          class="maindivcontent"
          style="position: relative; height: 90%; width: 95%; margin-left: 2%"
        >
          <div id="countjybottomrightgf" style="">
            <p style="position: absolute; top: 0; left: 0">各区县供应商</p>
            <div
              id="analysisogf"
              ref="analysisogf"
              style="
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 99;
              "
            ></div>
          </div>
          <div class="maindTitle" style="width: 35%; left: -1.5%">
            <div class="maindTitle_1">
              <p class="maindTitle_p" id="shuzigfshanqu">
                {{ szgfmesinfo.gysnum || 0 }}
              </p>
              <div class="maindTitle_boundary"></div>
              <p class="maindTitle_supplier">山区二十六县供应商</p>
            </div>
            <div>
              <img src="@/assets/rightjiantou.png" alt="" />
            </div>
            <div>
              <p class="maindTitle_p" id="shuzigfzhongbiao">
                {{ szgfmesinfo.zbzje || 0 }}
              </p>
              <div class="maindTitle_boundary"></div>
              <p class="maindTitle_supplier">中标总金额(亿元)</p>
            </div>
          </div>
          <div class="maindivcontent_img">
            <div style="width: 100%; height: 100%; position: relative">
              <div class="ecrratetopcheck1">
                <div
                  style="
                    display: flex;
                    margin-right: 1%;
                    position: relative;
                    align-items: center;
                  "
                >
                  <p style="width: 2rem">区县:</p>
                  <div class="ecrratemenucheck1">
                    <div class="myselectimgszgf2" v-if="county.length > 0">
                      <Select
                        v-model="quxiancode"
                        placeholder="请选择"
                        @visible-change="mouseClick"
                      >
                        <i slot="prefix" class="el-input__icon" />
                        <el-option
                          v-for="item in county"
                          :key="item.diccode"
                          :label="item.dicname"
                          :value="item.diccode"
                        >
                        </el-option>
                      </Select>
                    </div>
                    <div class="myselectimgszgf2" v-else>
                      <Select placeholder="请选择" @visible-change="mouseClick">
                        <i slot="prefix" class="el-input__icon" />
                        <el-option
                          v-for="item in county"
                          :key="item.diccode"
                          :label="item.dicname"
                          :value="item.diccode"
                        >
                        </el-option>
                      </Select>
                    </div>
                  </div>
                </div>
                <div style="display: flex; align-items: center">
                  <p style="width: 2rem">时间:</p>
                  <div class="ecrratemenucheck1">
                    <div class="style9">
                      <dataPicker
                        v-model="quxiantime"
                        type="year"
                        value-format="yyyy"
                        placeholder="请选择"
                        :editable="false"
                        prefix-icon="1"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="maindTitle"
                style="width: 32%; position: absolute; top: 18%; left: 0%"
              >
                <div class="maindTitle_2">
                  <p class="maindTitle_p" id="szgfgyshj">
                    {{ szgfmesinfo.gyshj || 0 }}
                  </p>
                  <div class="maindTitle_boundary"></div>
                  <p class="maindTitle_supplier">供应商合计</p>
                </div>
                <div>
                  <img src="@/assets/rightjiantou.png" alt="" />
                </div>
                <div>
                  <p class="maindTitle_p" id="szgfgyszje">
                    {{
                      szgfmesinfo.gqxzje > 999.99 ? (szgfmesinfo.gqxzje / 10000).toFixed(2) : szgfmesinfo.gqxzje || 0
                    }}
                    <!-- {{ returnFloat(szgfmesinfo.gqxzje / 10000) }} -->
                  </p>
                  <div class="maindTitle_boundary"></div>
                  <p class="maindTitle_supplier">
                    总金额<span id="szgfzje"
                      ><span v-if="szgfmesinfo.gqxzje > 999.99">(亿元)</span
                      ><span v-else>(万元)</span></span
                    >
                  </p>
                </div>
              </div>
              <div class="digitalModule">
                <div
                  class="digitalModule_1"
                  v-for="item in countData"
                  :key="item.key"
                >
                  <div class="digitalModule_1_1">
                    <p class="maindTitle_pbottom">
                      {{ item.num }}<span class="bottomtectmaind">家</span>
                    </p>
                    <div style="margin-top: 9%">
                      <img
                        src="@/assets/yellowdownsanjiao.png"
                        alt=""
                        style="transform: rotate(270deg)"
                      />
                    </div>
                    <p class="maindTitle_pbottom">
                      <!-- {{
                        item.amount > 999.99 ? (item.amount / 10000).toFixed(2) : item.amount
                      }} -->
                      {{
                        item.amount > 999.99
                          ? returnFloat(item.amount / 10000)
                          : item.amount
                      }}
                      <span class="bottomtectmaind">{{
                        item.amount > 999.99 ? "亿元" : "万元"
                      }}</span>
                    </p>
                  </div>
                  <div class="digitalModule_boundary"></div>
                  <div style="margin-left: 14px; text-align: center">
                    {{ item.key }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import * as echarts from "echarts";
import { yearDate } from "@/utils/common";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";

export default {
  props: {},
  data() {
    return {
      quxiancode: "全部",
      quxiantime: yearDate(),
      // from: { count: "C02330127", time: yearDate() }, //查询条件
      countData: [],
      county: [],
      szgfmesinfo: {
        gysnum: 0,
        zbzje: 0,
        gyshj: 0,
        gqxzje: 0,
      },
    };
  },
  watch: {
    quxiancode(newVal, oldVal) {
      if (newVal == "") {
        this.quxiancode = "C02330127";
      }
      this.getmountainSupplierTotal();
      this.getmountainTypeAnalysis();
    },
    quxiantime(newVal, oldVal) {
      this.countData = [];
      // if (newVal == null || newVal == "" || !newVal) {
      //   this.quxiantime = oldVal;
      //   console.log(typeof(newVal) , "newV99", yearDate(),this.quxiantime);
      // }
      this.getmountainSupplierTotal();
      this.getmountainTypeAnalysis();
    },
  },
  components: { YYDatePick, dataPicker, Select },
  mounted() {
    //
    //随着屏幕大小调节图表
    // window.addEventListener("resize", () => {
    //   let myChart = echarts.init(document.getElementById("analysisogf"));
    //   console.log(myChart, "mycharts");
    //   myChart.resize();
    // });
    this.$store.state.imgurlsel = require("@/assets/imgs/jianbiansanjiao.png");
    this.getmountainList();
    this.getszgfmesinfo();
    this.getmountainSupplierAnalysis();
  },
  methods: {
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);

      // num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
      // if (num.indexOf(".") !== -1) {
      //   let [integerPart, decimalPart] = num.split(".");

      //   if (decimalPart.length > 2) {
      //     decimalPart = decimalPart.substring(0, 2);
      //   } else if (decimalPart.length === 1) {
      //     decimalPart += "0";
      //   }

      //   num = `${integerPart}.${decimalPart}`;
      // } else {
      //   num += ".00";
      // }

      return num;
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    getszgfmesinfo() {
      APIS.Szgf.mountainSupplier()
        .then((res) => {
          this.szgfmesinfo.gysnum = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
      APIS.Szgf.totalBiddingAmount()
        .then((res) => {
          // this.szgfmesinfo.zbzje = (res.data.totalprice / 100000000).toFixed(2);
          this.szgfmesinfo.zbzje = this.returnFloat(
            res.data.totalprice / 100000000
          );
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmountainSupplierTotal() {
      let data = {};

      if (this.quxiantime != null) {
        data["startDate"] = this.quxiantime + "-01-01 00:00:00";
        data["endDate"] = this.quxiantime + "-12-31 23:59:59";
      }
      // 全部county不传
      const parameter =
        this.quxiancode == "全部"
          ? { ...data }
          : {
              ...data,
              county: this.quxiancode,
            };
      APIS.Szgf.mountainSupplierTotal(parameter)
        .then((res) => {
          // this.szgfmesinfo.gqxzje = (res.data.total / 10000).toFixed(2);
          this.szgfmesinfo.gqxzje = this.returnFloat(res.data.total / 10000);
          this.szgfmesinfo.gyshj = res.data.today;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmountainTypeAnalysis() {
      this.countData = [];
      let data =
        this.quxiancode == "全部"
          ? {}
          : {
              county: this.quxiancode,
            };
      let arr = [];
      if (this.quxiantime != null) {
        data["startDate"] = this.quxiantime + "-01-01 00:00:00";
        data["endDate"] = this.quxiantime + "-12-31 23:59:59";
      }
      APIS.Szgf.mountainTypeAnalysis(data)
        .then((res) => {
          for (const key in res.data) {
            arr.push({
              key: key,
              num: res.data[key].num,
              // amount: (res.data[key].amount / 10000).toFixed(2),
              amount: this.returnFloat(res.data[key].amount / 10000),
            });
          }
          this.countData = arr;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmountainList() {
      APIS.Baseapi.mountainList()
        .then((res) => {
          this.county = res.data;
          this.county.unshift({ diccode: "全部", dicname: "全部" });
          this.getmountainTypeAnalysis();
          this.getmountainSupplierTotal();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmountainSupplierAnalysis() {
      let linexValue = [],
        baryvalue1 = [],
        lineyvalue = [];
      APIS.Szgf.mountainSupplierAnalysis()
        .then((res) => {
          for (const key in res.data) {
            linexValue.push(key);
            // baryvalue1.push((res.data[key].amount / 10000).toFixed(2));
            baryvalue1.push(this.returnFloat(res.data[key].amount / 10000));
            lineyvalue.push(res.data[key].num);
          }
          this.lineandbarChartRender1(linexValue, baryvalue1, lineyvalue);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    lineandbarChartRender1(linexValue, baryvalue1, lineyvalue) {
      var myChart = echarts.init(this.$refs["analysisogf"]);
      var option;
      option = {
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        legend: [
          {
            top: "2%",
            right: "50%",
            textStyle: {
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 400,
            },
            itemWidth: 15,
            itemHeight: 10,
            data: [
              {
                name: "总金额",
                icon: "rect",
              },
            ],
          },
          {
            top: "2%",
            right: "32%",
            textStyle: {
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 400,
            },
            itemWidth: 15,
            itemHeight: 5,
            data: [
              {
                name: "供应商总量",
                icon: "rect",
                backgroundColor: "#f5f5f5",
              },
            ],
          },
        ],
        xAxis: {
          type: "category",
          data: linexValue,
          axisTick: {
            alignWithLabel: true,
          },
          // axisLabel: {
          //   interval: 0,
          //   rotate: "-45",
          // },
          axisLabel: {
            interval: 0,
            rotate: "-45",
            margin: 8,
            formatter: function (params) {
              var val = "";
              if (params.length > 4) {
                val = params.substr(0, 4) + "...";
                return val;
              } else {
                return params;
              }
            },
          },
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "总金额",
            type: "bar",
            barWidth: 15,
            itemStyle: {
              normal: {
                color: "#182c56",
              },
            },
            data: baryvalue1,
          },
          {
            name: "供应商总量",
            type: "line",
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: true,
            showSymbol: false,
            lineStyle: {
              color: "#fdbe45",
            },
            itemStyle: {
              normal: {
                color: "#fdbe45",
              },
            },
            data: lineyvalue,
          },
        ],
      };

      option && myChart.setOption(option);
      window.addEventListener("resize", function () {
          myChart.resize();
        });
    },
  },
};
</script>
<!-- // 这种引入确保样式只在该组件生效 -->
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss" scoped>
.shuzigongfu {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  .el-input__icon {
    color: #192c55 !important;
  }
  .el-input__inner {
    &::placeholder {
      color: #192c55;
    }
    background-color: rgba(237, 241, 249, 1);
    border: none;
    color: #192c55;
  }
}

::v-deep .style9 {
  margin-left: 0.3rem;
  .el-input__prefix {
    width: 0.6rem;
    height: 0.6rem;
    content: "";
    background: url(../assets/jianbiansanjiao.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 20%;
    margin-left: calc(100% - 1.6rem);
  }
  .el-input__inner {
    font-family: JCYT;
    // border: 0.05rem solid #192c55;
    border: none;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    padding-right: 2.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__icon {
    line-height: 1.3rem;
    width: 1rem;
    height: 1rem;
    display: none;
  }
  .el-input__suffix {
    width: 1rem;
    height: 1rem;
    color: #192c55;
    right: 1.3rem;
    // top: calc(100% - 0.6rem);
  }
  .el-date-editor.el-input {
    width: 5rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}
::v-deep .myselectimgszgf2 {
  width: 5rem;
  margin-left: 0.5rem;
  .el-input__inner {
    font-family: JCYT;
    /* border: 0.05rem solid #192c55; */
    border: none;
    border-radius: 1.1rem;
    background-color: transparent;
    height: 1.3rem;
    padding-left: 0.5rem;
    position: relative;
    font-size: 0.8rem;
  }
  .el-input__prefix {
    width: 0.6rem;
    height: 0.6rem;
    content: "";
    background: url("@/assets/jianbiansanjiao.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    top: 20%;
    margin-left: calc(100% - 1rem);
  }
  .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 0.6rem);
  }
  .el-select .el-input .el-select__caret {
    color: #192c55;
  }
  .el-icon-arrow-up:before {
    content: "";
  }
}
</style>
